import Base from "../components/Base"
import AuditSituation from "../components/AuditSituation"
import Risk from "../components/Risk"
import AuditStatistics from "../components/AuditStatistics"
import useMount from "../hooks/useMount"
// eslint-disable-next-line no-unused-vars
import { getAuditReport, generateReport } from "../request/api"
// import dataSource from '../data.json'
import { parseData } from "../utils"
import { Spin } from "antd"
import { useState, useEffect, useRef } from "react"
import { useSearchParams } from "react-router-dom"

const App = () => {
  const [dataSource, setDataSource] = useState({})
  // const [report, setReport] = useState({})
  const {
    basicInfo = {},
    chartData = {},
    companyData = {},
    textContent = {},
    managementAspects
  } = dataSource

  const [loading, setLoading] = useState(true)

  const [searchParams] = useSearchParams()
  console.log(
    "searchParams.get('companyName')",
    searchParams.get("companyName")
  )
  const companyName = decodeURIComponent(
    searchParams.get("companyName") || "国网武汉供电公司"
  )

  const mainRef = useRef(null)
  let didInit = false
  useMount(async () => {
    if (!didInit) {
      didInit = true
    } else {
      return
    }
    // setLoading(true)
    // const data = await getAuditReport("华泰科技集团有限公司")
    try {
      const data = await getAuditReport(companyName)
      setDataSource(data)
      // const data = await getAuditReport("国网荆州供电公司")
      // const report = await generateReport(companyName)
      // console.log("report", report)
      // setReport(report)

      setLoading(false)
    } catch (error) {
      console.log("error", error)
      setLoading(false)
    }
  })

  // const { size, setSize } = useState({
  //   width: window.innerWidth,
  //   height: window.innerHeight
  // })

  const [scale, setScale] = useState(1)

  useEffect(() => {
    function adjustScale() {
      const baseWidth = 1920 // 设计稿基准宽度
      const currentWidth = window.innerWidth
      const scale = currentWidth / baseWidth
      setScale(scale)
      if (scale >= 1) return

      document.body.style.transform = `scale(${scale})`
      document.body.style.transformOrigin = "top left"
      document.body.style.width = `${baseWidth}px`
      document.body.style.height = `1080px`
      // if(mainRef.current) {
      //   mainRef.current.style.transform = `scale(${scale})`;
      //   mainRef.current.style.transformOrigin = 'top left';
      // }
    }

    window.addEventListener("resize", adjustScale)
    adjustScale() // 初始化
  }, [])

  if (loading) {
    return (
      <div className="h-full flex items-center justify-center">
        <Spin size="large" />
      </div>
    )
  }

  return (
    <div
      className="h-full relative"
      style={{
        backgroundImage: `url('home_bg_inner.png')`,
        backgroundRepeat: "no-repeat",
        backgroundSize: `${scale} ${scale}`
      }}
    >
      {/* 外边框背景图 */}
      <div
        className="absolute h-full w-full top-0 left-0 right-0 z-0"
        style={{
          backgroundImage: `url('home_bg@1x.png')`,
          backgroundRepeat: "no-repeat",
          backgroundSize: `${scale} ${scale}`
        }}
      ></div>
      {/* 顶部标题 */}
      <h1 className="w-full h-[90px] text-center text-[44px] text-white title z-20 relative">
        {companyName}审计画像
      </h1>
      {/* 正文 */}
      <main
        className="flex items-center justify-center px-[48px]"
        ref={mainRef}
      >
        <div
          className="w-[839px] h-[932px] px-[28px] pt-[17px] pb-[11px]"
          style={{
            backgroundImage: `url('left_banner.png')`,
            backgroundRepeat: "no-repeat",
            backgroundSize: "cover"
          }}
        >
          {/* 基本情况 */}
          <Base
            className="w-full h-[640px]"
            basicInfo={basicInfo}
            chartData={chartData}
            companyData={companyData}
          />
          {/* 审计情况 */}
          <AuditSituation chartData={chartData} />
        </div>
        <div
          style={{
            backgroundImage: `url('right_banner.png')`,
            backgroundRepeat: "no-repeat",
            backgroundSize: "cover",
            width: "965px",
            height: "932px",
            padding: "17px 21px 12px 30px"
          }}
        >
          {/* 主要风险 */}
          <Risk
            riskCategoriesData={parseData(chartData.riskCategoriesData)}
            riskTrendsData={parseData(chartData.riskTrendsChart)}
            managementAspects={managementAspects}
            textContent={textContent}
          />
          {/* 审计整改 */}
          <AuditStatistics
          // progress={parseData(chartData.rectificationProgressChart)}
          // overview={textContent.rectificationSummaryText}
          // status={parseData(chartData.rectificationStatusChart)}
          />
        </div>
      </main>
    </div>
  )
}

export default App
